@import '../../styles/colors.scss';

.action-button {
    font-family: 'Heebo', sans-serif;
    padding: 10px 14px;
    color: white;
    flex-shrink: 0;
    flex-wrap: nowrap;
    cursor: pointer;
    margin-right: 7px;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    font-weight: 500;
    justify-content: center;

    &--dark {
        color: $shine;
        &:hover {
            color: white;
        }
    }

    @mixin dark-background {
        border: 1px solid $silver-lining;
        background-color: $fog;
        color: $silver-lining;
    }

    &--transparent {
        padding: 10px 5px;
        color: $argo-color-gray-8;

        &:hover {
            color: $sherbert;
        }
    }

    &--transparent > &__background {
        background: none !important;
        border: none !important;
    }

    &--dark > &__background {
        @include dark-background;
    }

    &__background {
        border-radius: 20px;
        border: 1px solid $argo-color-gray-6;
        background-color: $argo-color-gray-6;
        color: $argo-color-gray-6;

        &--dark {
            @include dark-background;
        }
    }

    &:hover > &__background,
    &--selected > &__background {
        background-color: $sherbert;
        border-color: $sherbert;
        color: $sherbert;
        transform: scale(1.02);
    }

    &--dark:hover > &__background,
    &--selected#{&}--dark > &__background {
        color: $sherbert;
        background-color: $spray-tan;
        border-color: $sherbert;
    }

    &--disabled {
        color: $argo-color-gray-4;
        cursor: not-allowed;
    }

    &--disabled:hover > &__background {
        background-color: $argo-color-gray-6;
        border-color: $argo-color-gray-6;
    }

    &--disabled#{&}--dark {
        color: $dull-shine;
        &:hover {
            color: $dull-shine;
        }
    }

    &--disabled#{&}--dark:hover > &__background {
        border-color: $silver-lining;
        background-color: $fog;
    }
}
